<template>
    <div>
        <!-- 商品导航组件 -->
        <van-goods-action>
            <van-goods-action-icon icon="cart-o" text="购物车" :badge="this.cartNum" @click="onClickIcon" />
            <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
            <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
            <van-goods-action-button type="warning" text="加入购物车" @click="onClickButton" />
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
        <!-- 商品规格组件 -->
        <van-sku v-model="show" :sku="sku" :goods="goods" :quota="quota" :hide-stock="sku.hide_stock"
            @buy-clicked="onBuyClicked" @add-cart="onAddCartClicked" ref="sku" /><!-- 绑定一个ref属性，获取该组件实例，通过该组件实例上的方法获取步进器的值 -->
    </div>
</template>

<script>
// 导入添加商品接口
import { cartNumberAPI, add } from '@/api/addCartAPI';


export default {
    name: '',
    data() {
        return {
            show: false,//控制商品规格面板是否显示
            sku: {
                // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
                // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
                tree: [],
                price: '', // 默认价格（单位元）
                stock_num: 227, // 商品总库存
                collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
                none_sku: false, // 是否无规格商品
                hide_stock: false // 是否隐藏剩余库存
            },
            goods: {
                // 默认商品 sku 缩略图
                picture: ''
            },
            quota: 10,
            cartNum: 0//购物车 中的商品数量,用于徽标渲染



        };
    },
    props: ['retail_price', 'list_pic_url', 'goods_number', 'productid'],
    components: {
        // goodsGUIGE
    },
    created() {
        // 调用获取购物车数量接口，获取购物车数量，渲染到徽标上
        cartNumberAPI().then(res => {
            console.log(121212);
            console.log('cartNum', res);
            this.cartNum = res.data.data.cartTotal.goodsCount
        })
    },
    updated() {
        this.getmessage()
    },
    methods: {
        onClickIcon() {
            // Toast('点击图标');
            this.$router.push('/cart')
        },
        onClickButton() {
            // Toast('点击按钮');
            // 调用接口
            // 显示商品规格面板
            this.show = true

        },
        getmessage() {
            this.sku.price = this.retail_price
            // this.sku.stock_num = String(this.goods_number)
            this.goods.picture = this.list_pic_url
            console.log(this.retail_price);
        },
        onBuyClicked() {

        },
        onAddCartClicked() {
            // 调用加入购物车接口
            console.log('hh', this.productid);
            add({
                goodsId: localStorage.getItem('goodsId'),
                productId: this.productid,
                number: this.$refs.sku.getSkuData().selectedNum
            }).then(res => {
                console.log(123);
                console.log('加购', res);
                // 改变购物车数量，用于徽标渲染
                this.cartNum = res.data.data.cartTotal.goodsCount
                // 显示添加成功
                this.$toast.success("添加成功");
            })
            // 隐藏商品规格面板
            this.show=false

        }


    },



}

</script>
<style scoped>

</style>